<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:ui="http://java.sun.com/jsf/facelets">

<h:body>

	<f:view>
		<ui:composition template="WEB-INF/templates/template.xhtml">
			
			
	<!-- Um den groÃen lila Hintergrund erscheinen zu lassen -->
	<ui:define name="lilabg">
	<div id="lilabg">
		&nbsp;
	</div>
	</ui:define>
		    
		    
		    
		    
		    
		    
		    <ui:define name="content">
		    
		      <!-- SLIDER -->
  <!-- The Orbit slider is initialized at the bottom of the page by calling .orbit() on #slider -->

  <div class="row">
    <div class="twelve columns" style="z-index:3;">
    <div id="sliderwrapper">
      <div id="slider">
        <img class="orbit-slide" src="#{animationBean.getFlyer(0)}" />
        <img class="orbit-slide" src="#{animationBean.getFlyer(1)}" />
        <img class="orbit-slide" src="#{animationBean.getFlyer(2)}" />
      </div>
      <div id="sliderbg">&nbsp;</div>
      <div id="sliderbg2">&nbsp;</div>
    </div>
      <hr />
    </div>
  </div>


  <!-- Three-up Content Blocks -->

  <div class="row secondRow">


    <div class="four columns">
      <h3><h:outputText id="topevent0" value="#{animationBean.getHeadline(0)}"></h:outputText></h3>
      <a href="event.xhtml?id=#{animationBean.getEventId(0)}"><img src="#{animationBean.getFlyer(0)}" class="border" /></a>
      <h4><h:outputText id="date0" value="#{animationBean.getDate(0)}"></h:outputText></h4>
      <p><h:outputText id="description0" value="#{animationBean.getDescription(0)}"></h:outputText></p>
    </div>

    <div class="four columns">
      <h3><h:outputText id="topevent1" value="#{animationBean.getHeadline(1)}"></h:outputText></h3>
      <a href="event.xhtml?id=#{animationBean.getEventId(1)}"><img src="#{animationBean.getFlyer(1)}" class="border"  /></a>
      <h4><h:outputText id="date1" value="#{animationBean.getDate(1)}"></h:outputText></h4>
      <p><h:outputText id="description1" value="#{animationBean.getDescription(1)}"></h:outputText></p>
    </div>

    <div class="four columns">
      <h3><h:outputText id="topevent2" value="#{animationBean.getHeadline(2)}"></h:outputText></h3>
      <a href="event.xhtml?id=#{animationBean.getEventId(2)}"><img src="#{animationBean.getFlyer(2)}" class="border"  /></a>
      <h4><h:outputText id="date2" value="#{animationBean.getDate(2)}"></h:outputText></h4>
      <p><h:outputText id="description2" value="#{animationBean.getDescription(2)}"></h:outputText></p>
    </div>

  </div>

<hr />

  <!-- EVENTS -->

  <div class="row eventslist">

   <div class="four columns">
    <h2>----------------</h2>
      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(3)}"><img src="#{animationBean.getFlyer(3)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(3)}"><h:outputText id="topevent3" value="#{animationBean.getHeadline(3)}"></h:outputText></a></h4>
        	<p><h:outputText id="description3" value="#{animationBean.getDescription(3)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->
      
      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(4)}"><img src="#{animationBean.getFlyer(4)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(4)}"><h:outputText id="topevent4" value="#{animationBean.getHeadline(4)}"></h:outputText></a></h4>
        	<p><h:outputText id="description4" value="#{animationBean.getDescription(4)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->
    
    </div>

    <div class="four columns">
    <h2>Kommende Events</h2>
      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(5)}"><img src="#{animationBean.getFlyer(5)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(5)}"><h:outputText id="topevent5" value="#{animationBean.getHeadline(5)}"></h:outputText></a></h4>
        	<p><h:outputText id="description5" value="#{animationBean.getDescription(5)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->


      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(6)}"><img src="#{animationBean.getFlyer(6)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(6)}"><h:outputText id="topevent6" value="#{animationBean.getHeadline(6)}"></h:outputText></a></h4>
        	<p><h:outputText id="description6" value="#{animationBean.getDescription(6)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->
      
      
    </div>

    <div class="four columns">
    <h2>----------------</h2>
      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(7)}"><img src="#{animationBean.getFlyer(7)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(7)}"><h:outputText id="topevent7" value="#{animationBean.getHeadline(7)}"></h:outputText></a></h4>
        	<p><h:outputText id="description7" value="#{animationBean.getDescription(7)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->

      <!--  one Event -->
      <div class="row event">
      	<div class="three columns eventimg">
        	<a href="event.xhtml?id=#{animationBean.getEventId(8)}"><img src="#{animationBean.getFlyer(8)}" /></a>
      	</div>
      	<div class="nine columns eventinfo">
        	<h4><a href="event.xhtml?id=#{animationBean.getEventId(8)}"><h:outputText id="topevent8" value="#{animationBean.getHeadline(8)}"></h:outputText></a></h4>
        	<p><h:outputText id="description8" value="#{animationBean.getDescription(8)}"></h:outputText></p>
      	</div>
      </div><!-- END one Event -->
      
    </div>
    
  </div>

  <!-- Call to Action Panel -->
  <!--
  <div class="row">
    <div class="twelve columns">

      <div class="panel">
        <h4>Get in touch!</h4>

        <div class="row">
          <div class="nine columns">
            <p>We'd love to hear from you, you attractive person you.</p>
          </div>
          <div class="three columns">
            <a href="#" class="radius button right">Contact Us</a>
          </div>
        </div>
      </div>

    </div>
  </div>
  -->
		    
		    </ui:define>

		    <ui:define name="scripts">
			    <script type="text/javascript">
				    $(document).ready(function() {
		            	$('#slider').orbit();
		        	});
			    </script>
		    </ui:define>
    
	    </ui:composition>
	</f:view>

</h:body>
</html>
